<template>
  <div>
    <h2>未打补丁Top10</h2>
    <v-chart :forceFit="true" :height="height" :data="data" :scale="scale">
      <v-tooltip :showTitle="false" dataKey="item*percent" />
      <v-axis />
      <v-legend dataKey="item" />
      <v-pie position="percent" color="item" :v-style="pieStyle" :label="labelConfig" />
      <v-coord type="theta" />
    </v-chart>
  </div>
</template>

<script>
const DataSet = require('@antv/data-set')

const sourceData = [
  { item: '事例一', count: 40 },
  { item: '事例二', count: 21 },
  { item: '事例三', count: 17 },
  { item: '事例四', count: 13 },
  { item: '事例五', count: 9 },
]

const scale = [
  {
    dataKey: 'percent',
    min: 0,
    formatter: '.0%',
  },
]



export default {
  data() {
    return {
      scale,
      height: 300,
      pieStyle: {
        stroke: '#fff',
        lineWidth: 1,
      },
      labelConfig: [
        'percent',
        {
          formatter: (val, item) => {
            return item.point.item + ': ' + val
          },
        },
      ],
    }
  },
  props:{
    data:[]
  },
}
</script>
